import AutoComplete from 'antd/es/auto-complete';
import Divider from 'antd/es/divider';
import { AppStore } from '../../../../store';
import { useCallback, useMemo, useState } from 'react';
import { flattenModels } from '../../../../util';
import Input from 'antd/es/input';
import { EInteractionMode, MetaFields, ISelectEventParam } from '@manycore/custom-ksg-viewer-sdk';
import Select from 'antd/es/select';
import message from 'antd/es/message'

export function SelectionDemo(props: {
    createButton: (infos: Array<{
        /** buttonName */
        name: string,
        onClick: () => void;
    }>) => JSX.Element[]
}) {
    const { createButton } = props;
    const { appState: { app, jsonData } } = AppStore.useContainer();
    const [inputModelId, setInputModelId] = useState<string>();
    const [disableInputValue, setDisableInputValue] = useState<string>();
    
    const models = useMemo(() => {
        return flattenModels(jsonData?.paramModel || []);
    }, [jsonData])

    const CSelectionApis = [{
        name: '选中指定模型',
        onClick: () => inputModelId && app!.selectionService.select([inputModelId])
    }, {
        name: '取消指定模型选中',
        onClick: () => inputModelId && app!.selectionService.unSelect([inputModelId])
    }, {
        name: '取消全部模型选中',
        onClick: () => app!.selectionService.clearSelect()
    }, {
        name: '获取当前选中模型',
        onClick: () => {
            const selected = app!.selectionService.getSelected();
            if (selected.length) {
                message.info(selected.join(';'))
            } else {
                message.error('未选中任何模型!');
            }
        }
    }];

    const onListener = useCallback((param: ISelectEventParam) => {
        setDisableInputValue(JSON.stringify(param));
    }, []);

    const CEventApis = [
        {
            name: '监听选中对象',
            onClick: () => app!.selectionService.on(onListener)
        }, {
            name: '单次监听',
            onClick: () => app!.selectionService.once(onListener)
        }, {
            name: '取消监听',
            onClick: () => app!.selectionService.off(onListener)
        }
    ]

    return <>
        <Divider>模型选中</Divider>
        <AutoComplete value={inputModelId} onChange={(data) => setInputModelId(data)} style={{ width: '100%' }} placeholder='输入或者选择模型id' options={models.map(m => ({ value: m.id }))} />
        {createButton(CSelectionApis)}
        <Divider>选中监听</Divider>
        <Input.TextArea placeholder='监听事件收到的信息' value={disableInputValue} disabled={true} />
        {createButton(CEventApis)}
        <Divider>交互模式</Divider>
        <Select defaultValue={EInteractionMode.PRODUCT} onChange={(data) => app!.selectionService.config.interactionMode.set(data)} style={{ width: '100%' }} options={[{
            value: EInteractionMode.PRODUCT,
            label: '底层商品模式'
        }, {
            value: EInteractionMode.TOP_MODEL,
            label: '整体模式'
        }, {
            // 只允许选中板件
            value: (data: MetaFields) => data.prodCatId === 713,
            label: '板件模式'
        }]} />
    </>
}